<!--  -->
<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>个人设置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-row :gutter="100">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form ref="form" :model="user" label-width="80px">
              <el-form-item label="手机">13911111111</el-form-item>
              <el-form-item label="媒体名称">
                <el-input v-model="user.name"></el-input>
              </el-form-item>

              <el-form-item label="媒体介绍">
                <el-input type="textarea" v-model="user.intro"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="user.email"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="updateProfile">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
           <div>
               <label for="file">
                  <img :src="user.photo" alt="" srcset="" class="user_imge" @dialogTableVisible="true">
                <div >点击修改头像</div>
               </label>
                <div class="father_img">
                  <input type="file" id="file" hidden @change="uploadImage" ref="file">
                </div>
                </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
     <el-dialog 
     title="上传图片"
     :visible.sync="dialogTableVisible"
     :append-to-body="true"
     @opened="dialogOpened"
     @closed='dialogClosed'>
         <div>
            <img :src="preImage" alt="" ref="pre_image" class="pre_img">
         </div>
          <el-button @click="xiugai" type="primary">上传</el-button>
        </el-dialog>
  </div>
</template>

<script>
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'

import { getUser,updateProfile,updateimage } from "@/api/login";
export default {
    
  data() {
    return {       
      user: {
        name: null,
        intro: null,
        email: ""
      },
      dialogTableVisible:false,
      preImage:'',
      cropper:null

    };
  },
  methods: {
    getUser() {
      getUser().then(res => {
        this.user = res.data.data;
     
      });
    },
    xiugai(){
      this.cropper.getCroppedCanvas().toBlob((blob) => {
        const formData = new FormData();
        formData.append('photo', blob);
        updateimage(formData).then(res=>{
          console.log(res);
          this.dialogTableVisible=false
          this.getUser();
            
        })
      })
    },
    updateProfile(){
        this.$confirm('确定要修改吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateProfile({
            name:this.user.name,
            intro:this.user.intro,
            email:this.user.email
        }).then(res=>{
        this.getUser();
        })
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
           
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          })        
        })
        
    },
    uploadImage(){
      const file=window.URL.createObjectURL(this.$refs.file.files[0])
      this.preImage=file
      this.dialogTableVisible=true
      this.$refs.file.value = ''
      
    },
    dialogClosed(){
this.cropper.destroy()
    },
    dialogOpened(){
      const image=this.$refs.pre_image
      this.cropper = new Cropper(image, {
      aspectRatio: 1,
      viewMode:1,
      background:false
    });
    }
  },
  created() {
    this.getUser();
  }
};
</script>
<style scoped>
.user_imge{
    width: 150px;
}

.pre_img{
   display: block;
  max-width: 100%;
  height: 200px;

}

</style>